<template>
  <div id="app">
    <h1>Hello, {{loginUser}}</h1>
    <el-row>
      <el-col>
        <el-menu default-active="5" class="el-menu-demo" mode="horizontal">
          <el-menu-item index="1">高级插件</el-menu-item>
          <el-menu-item index="2">在线商城</el-menu-item>
          <el-menu-item index="3">客户管理</el-menu-item>
          <el-menu-item index="4">系统设置</el-menu-item>
          <el-menu-item index="5">活动发布</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>

    <a @click="resetName">重置姓名</a>

    <router-link to="/">首页</router-link>
    <router-link to="/test">测试页面</router-link>
    <router-link :to="{path: '/operator', query: {msg}}">用户列表</router-link>
    <router-link to="/org">机构管理</router-link>
    <router-link to="/shopping">vuex test</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'app',
  data() {
    return {
      msg: Math.random()
    }
  },
  methods: {
    reset() {
      const d = Math.random();
      console.log(d);
      this.msg = d;
    },
    resetName() {
      this.$store.commit('setUsername', 'Tom');
    }
  },
  computed: {
    ...mapState({
      'loginUser': 'username'
    })
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>
